<template>
    <div >
        <div class= "divImages">
            <img src="http://static.runoob.com/images/demo/demo1.jpg">
            <p>这里添加图片文本描述</p>
        </div>
        <div class= "divImages">
            <img src="http://static.runoob.com/images/demo/demo2.jpg">
            <p>这里添加图片文本描述</p>
        </div>
        <div class= "divImages">
            <img src="http://static.runoob.com/images/demo/demo3.jpg">
            <p>这里添加图片文本描述</p>
        </div>
        <div class= "divImages">
            <img src="http://static.runoob.com/images/demo/demo4.jpg">
            <p>这里添加图片文本描述</p>
        </div>

    </div>
</template>

<script>
    export default {
        name: "index.vue"
    }
</script>

<style>

    .divImages {
        float: left;
        margin-left: 50px;
        margin-top: 50px ;
        border: 1px dotted darkgray;
        /*添加阴影  第一个是右 第二个是下 第三个是虚化程度*/
        box-shadow: 10px 10px 5px #888888;
    }

    .divImages img{
        width: 100%;
        height: 40%;
    }

    .divImages p{
        text-align: center;
    }

    /*700px < x < 3600px 显示30%*/
    @media only screen and (min-width: 1200px) and (max-width: 2600px){
        .divImages{
            width: 30%;
        }
    }

    /*当小于500px的时候，显示100%*/
    @media only screen and (min-width: 100px) and (max-width: 1200px){
        .divImages{
            width: 100%;
        }
    }

</style>